<template>
  <div id="Content">
    <!--    productList?????-->
    <el-table :data="productList" style="width: 500px;margin: 0 auto">
      <!--      设计表格  表头与接口一致-->
      <el-table-column prop="productId" label="Product ID"></el-table-column>
      <el-table-column prop="productNameEnglish" label="Name"></el-table-column>
      <el-table-column label="Operation">
        <!--        点击展示按钮-->
        <template #default="row">
          <!--          插槽语句，定义每一行 跳转-->
          <el-button type="text" @click="viewProduct(row.row.productId)">View</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="back">
      <a @click="back">Return to Main Menu</a>
    </div>
  </div>
</template>
<script>
import {ref, onMounted} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {ElTable, ElTableColumn, ElButton} from 'element-plus';
import {Back} from "@element-plus/icons-vue";

export default {
  components: {
    Back,
    ElTable, ElTableColumn, ElButton
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const productList = ref([{
      productId: 0
    }]);//路由
    const viewProduct = (productId) => {
      console.log('点击了查看按钮', productId);
      router.push({path: '/product', query: {productId}});
    };

    function back() {
      router.go(-1)
    }

    //在组件加载时获取数据
    onMounted(() => {
      if (route.query.productList) {
        const data = JSON.parse(route.query.productList);
        // 将可能是数字的字段进行转换
        productList.value = data.map(item => {
          return {
            productId: parseInt(item.productId),
            productImage: item.productImage,
            productNameChinese: item.productNameChinese,
            productNameEnglish: item.productNameEnglish,
            supplierId: parseInt(item.supplierId),
          };
        });
        console.log('接收到的数据', productList.value);
      }
    });
    return {
      productList,
      viewProduct,
      back
    };
  }
};
</script>
<style scoped>
/*样式*/
a {
  cursor: default;
}

#Content {
  display: flex;
  justify-content: space-between;
}
</style>